<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title th:text="${title}">展示</title>
  <link rel="stylesheet" href="/css/styles/tokyo-night-dark.css" />
  <script src="/js/highlight.min.js"></script>
  <script src="/js/highlight-line-numbers.js"></script>
  <script src="/js/marked.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #868686c1;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #8b8989;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-track {
      background-color: #93939314;
      border-radius: 4px;
    }

    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    body {
      background-color: #1a1b26;
      color: #9aa5ce;
    }

    pre code {
      min-height: 100vh;
      box-sizing: border-box;
    }

    /* 对于数字块 */
    .hljs-ln-numbers {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-align: center;
      color: #ffffff73;
      border-right: 1px solid #ffffff73;
      vertical-align: top;
      padding-right: 5px;
    }

    /* for block of code */
    .hljs-ln-code {
      padding-left: 10px;
    }

    #md-view {
      margin: 10px auto;
      max-width: 1000px;
      box-sizing: border-box;
      padding: 10px 15px;
      border-left: 1px solid #9aa5ce;
      border-right: 1px solid #9aa5ce;
    }
  </style>
</head>

<body>
  <pre><code id="code"  th:text="${code}" th:class="${'language-'+codeType+' line-numbers'}" ></code></pre>
  <div id="md-view" style="display: none;">
  </div>
  <script th:inline="javascript">
    const code = document.getElementById('code').textContent

    const filename = [[${ title }]]
    const encoding = [[${ charsetStr }]]
    const encodingError = [[${ charSetError }]]
    if (encodingError) {
      const err = `编码${encoding}可能是错误的`
      if (window.parent?.$message) {
        window.parent?.$message.error(err)
      } else {
        alert(err)
      }
    }
    if (filename.toLowerCase().endsWith(".md")) {
      console.log(marked(code))
      const mdView = document.getElementById("md-view")
      document.getElementById("code").style.display = 'none'
      mdView.innerHTML = marked(code)
      mdView.style.display = 'block'
    } else {
      window.code = code
      hljs.initHighlightingOnLoad()
      hljs.initLineNumbersOnLoad()
    }


  </script>
</body>

</html>